<template>
    <f7-panel right resizable reveal>
        <f7-view>
            <f7-page>
                <f7-block>
                    <f7-list media-list>
                        <ul @click="sevenDay" class="link panel-close" style="width:100%;">
                            <li style="width:100%;">
                                <label class="item-radio item-content" style="border-bottom: 1px solid #ded9d9;">
                                    <input type="radio" name="demo-radio" value="Books" checked />
                                    <i class="icon icon-radio"></i>
                                    <div class="item-inner">
                                        <div class="item-title" style="padding-left: 35%;">最近7天</div>
                                    </div>
                                </label>
                            </li>
                        </ul>
                        <ul @click="oneMonth" class="link panel-close" style="width:100%;margin-bottom: 5px;">
                            <li style="width:100%;">
                                <label class="item-radio item-content" style="border-bottom: 1px solid #ded9d9;">
                                    <input type="radio" name="demo-radio" value="Books"  />
                                    <i class="icon icon-radio"></i>
                                    <div class="item-inner" style="margin-bottom: 2px;">
                                        <div class="item-title" style="padding-left: 30%;">最近一个月</div>
                                    </div>
                                </label>
                            </li>
                        </ul>
                        <div style="margin: 10px;border: 1px solid #d0cbcb;border-radius: 10px;">
                            <label style="padding: 10px;">请选择时间范围:</label>
                            <div class="list inline-labels no-hairlines-md" >
                                <ul>
                                    <li class="item-content item-input">
                                        <div class="item-inner" >
                                            <div class="item-input-wrap" >
                                                <input type="text" v-model="startDate" id="start-date" placeholder="开始时间">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="list inline-labels no-hairlines-md" style="margin-top: 0px;">
                                <ul>
                                    <li class="item-content item-input">
                                        <div class="item-inner" >
                                            <div class="item-input-wrap" >
                                                <input type="text" v-model="endDate" id="end-date" placeholder="结束时间">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <ul @click="periodDate" class="link panel-close" style="width:100%;">
                                <li style="width:100%;">
                                    <label class="item-radio item-content">
                                        <input type="radio" name="demo-radio" value="Books" />
                                        <i class="icon icon-radio"></i>
                                        <div class="item-inner">
                                            <div class="item-title" style="padding-left: 42%;">确定</div>
                                        </div>
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </f7-list>
                </f7-block>
            </f7-page>
        </f7-view>
    </f7-panel>
</template>

<script>
    import eventBus from '@/utils/eventBus.js';
    export default {
        name: "ChangeDate",
        props: {

        },
        data: function() {
            return {
                startDate: '',
                endDate: ''
            }
        },
        methods: {
            sevenDay: function() {
				this.$store.state.todo.startDate =  null;
				this.$store.state.todo.endDate =  null;
				this.$store.state.todo.duration =  7;
                this.changeDate();
            },
            oneMonth: function () {
				this.$store.state.todo.startDate =  null;
                this.$store.state.todo.endDate =  null;
                this.$store.state.todo.duration =  30;
				this.changeDate();
            },
            periodDate: function() {
                this.$store.state.todo.startDate = startDate;
                this.$store.state.todo.endDate = endDate;
				this.changeDate();
            },
			changeDate: function(){
				eventBus.$emit("change-date", true);
			}
        },
        mounted: function () {
            var self = this;
            var calendar = {
                inputEl: '#end-date',
                dateFormat: 'yyyy-mm-dd',
                dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                monthNamesShort:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                toolbarCloseText: '完成',
                closeOnSelect: true
            };
            calendar.inputEl = '#start-date';
           calendar.on = {
                calendarChange: function(calendar, value) {
                    self.startDate = calendar.formatValue();
                }
            };
            var startCalendar = calendar;
            var startCalendarModal = self.$f7.calendar.create(startCalendar);

            calendar.inputEl = '#end-date';
            calendar.on = {
                calendarChange :function(calendar, value){
                    self.endDate = calendar.formatValue();
                }
            };
            var endCalendar = calendar;
            var endCalendarModal = self.$f7.calendar.create(endCalendar);
        }
    }
</script>

<style scoped>

</style>